<template>
  <div>
    <h1>My Page</h1>
    <ul>
      <li v-for="(article, index) in articles" :key="article ? article.id : index">
        <span v-if="article">{{ article.id }} : {{ article.title }}</span>
        <span v-else>{{ article }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';
import { getArticle } from "../api/common";
import sendRequests from "../utils/index";

export default {
  setup() {
    const articles = ref([]);

    /*const loadArticles = async () => {
      const requests = [];
      for (let i = 1; i <= 30; i++) {
        const request = () => getArticle(i, {
          loading: true,
          isShowSuccessMessage: true
        });
        requests.push(request);
      }
      sendRequests(requests).then((response) => {
        console.log('response', response)
        debugger
        articles.value = response.map((item) => item.data.article);
      }).catch((error) => {
        console.log('error', error)
        debugger
      })
    };*/

    const loadArticle = async (id) => {
      try {
        const response = await getArticle(id, {
          loading: true,
          isShowSuccessMessage: true
        });
        articles.value[id - 1] = response.data.article;
      } catch (error) {
        console.log('error', error)
      }
    };

    const loadArticles = async () => {
      for (let i = 1; i <= 30; i++) {
        loadArticle(i);
      }
    };

    loadArticles();

    return { articles };
  }
};
</script>